---
import { getBlogCollection, getUniqueTagsWithCount } from 'astro-pure/server'
import { Button } from 'astro-pure/user'
import { cn } from 'astro-pure/utils'
import PageLayout from '@/layouts/BaseLayout.astro'

const allPosts = await getBlogCollection()
const allTags = getUniqueTagsWithCount(allPosts)

const meta = {
  description: "A list of all the topics I've written about in my posts",
  title: 'All Tags'
}
---

<PageLayout {meta}>
  <Button title='返回' href='/blog' variant='back' />
  <main class='mt-6 lg:mt-10'>
    <div id='content-header' class='animate'>
      <h1 class='mb-6 text-3xl font-medium'>标签</h1>
    </div>

    <div id='content' class='animate'>
      {
        allTags.length > 0 ? (
          <ul class='flex flex-wrap gap-4'>
            {allTags.map(([tag, val]) => (
              <li>
                <Button
                  href={`/tags/${tag}`}
                  variant='pill'
                  class={cn(
                    'items-start gap-x-1',
                    val > 2 ? 'rounded-xl px-3 py-1 text-xl' : val > 1 && 'text-lg'
                  )}
                >
                  {tag}
                  <span class={val > 2 ? 'text-base' : 'text-xs'}>{val}</span>
                </Button>
              </li>
            ))}
          </ul>
        ) : (
          <p>暂无标签。</p>
        )
      }
    </div>
  </main>
</PageLayout>
